<template>
  <div class="churn-warning-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">⚠️ 流失预警管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新分析
            </el-button>
            <el-button type="success" @click="handleSettings">
              <el-icon><Setting /></el-icon>
              预警设置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 预警统计 -->
      <el-row :gutter="20" class="warning-stats">
        <el-col :span="6">
          <div class="warning-card high">
            <div class="warning-level">高风险</div>
            <div class="warning-count">{{ highRiskCount }}</div>
            <div class="warning-desc">30天未消费</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="warning-card medium">
            <div class="warning-level">中风险</div>
            <div class="warning-count">{{ mediumRiskCount }}</div>
            <div class="warning-desc">15-30天未消费</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="warning-card low">
            <div class="warning-level">低风险</div>
            <div class="warning-count">{{ lowRiskCount }}</div>
            <div class="warning-desc">7-15天未消费</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="warning-card total">
            <div class="warning-level">预警总数</div>
            <div class="warning-count">{{ totalWarnings }}</div>
            <div class="warning-desc">需要关注</div>
          </div>
        </el-col>
      </el-row>

      <!-- 流失预警列表 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="高风险会员" name="high">
          <el-table :data="highRiskMembers" border stripe>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="level" label="等级" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="daysSinceLastVisit" label="未消费天数" width="120">
              <template #default="{ row }">
                <el-tag type="danger">{{ row.daysSinceLastVisit }}天</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastConsumption" label="最后消费" width="120">
              <template #default="{ row }">
                ¥{{ row.lastConsumption.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="totalConsumption" label="累计消费" width="120">
              <template #default="{ row }">
                ¥{{ row.totalConsumption.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="churnScore" label="流失评分" width="100">
              <template #default="{ row }">
                <el-progress 
                  :percentage="row.churnScore" 
                  :color="getChurnColor(row.churnScore)"
                  :show-text="false"
                />
                <span :style="{ color: getChurnColor(row.churnScore) }">{{ row.churnScore }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleViewMember(row)">详情</el-button>
                <el-button link type="success" @click="handleSendCoupon(row)">发券</el-button>
                <el-button link type="warning" @click="handleCall(row)">电话回访</el-button>
                <el-button link type="info" @click="handleAddToCare(row)">加入关怀</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="中风险会员" name="medium">
          <el-table :data="mediumRiskMembers" border stripe>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="daysSinceLastVisit" label="未消费天数" width="120">
              <template #default="{ row }">
                <el-tag type="warning">{{ row.daysSinceLastVisit }}天</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="churnScore" label="流失评分" width="100">
              <template #default="{ row }">
                {{ row.churnScore }}%
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleViewMember(row)">详情</el-button>
                <el-button link type="success" @click="handleSendMessage(row)">发消息</el-button>
                <el-button link type="info" @click="handleAddToCare(row)">加入关怀</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="低风险会员" name="low">
          <el-table :data="lowRiskMembers" border stripe>
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="daysSinceLastVisit" label="未消费天数" width="120">
              <template #default="{ row }">
                <el-tag type="info">{{ row.daysSinceLastVisit }}天</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleViewMember(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 批量操作 -->
      <div class="batch-actions" v-if="selectedMembers.length > 0">
        <el-alert :title="`已选择 ${selectedMembers.length} 位会员`" type="info" :closable="false">
          <template #default>
            <div class="batch-buttons">
              <el-button size="small" type="success" @click="handleBatchSendCoupon">批量发券</el-button>
              <el-button size="small" type="primary" @click="handleBatchSendMessage">批量发消息</el-button>
              <el-button size="small" type="warning" @click="handleBatchAddToCare">加入关怀计划</el-button>
            </div>
          </template>
        </el-alert>
      </div>
    </el-card>

    <!-- 预警设置对话框 -->
    <el-dialog v-model="settingsDialogVisible" title="流失预警设置" width="600px">
      <el-form :model="warningSettings" label-width="120px">
        <el-form-item label="高风险标准">
          <el-input-number v-model="warningSettings.highRiskDays" :min="1" />
          <span style="margin-left: 10px;">天未消费</span>
        </el-form-item>
        <el-form-item label="中风险标准">
          <el-input-number v-model="warningSettings.mediumRiskDays" :min="1" />
          <span style="margin-left: 10px;">天未消费</span>
        </el-form-item>
        <el-form-item label="低风险标准">
          <el-input-number v-model="warningSettings.lowRiskDays" :min="1" />
          <span style="margin-left: 10px;">天未消费</span>
        </el-form-item>
        <el-form-item label="自动预警">
          <el-switch v-model="warningSettings.autoWarning" />
          <div class="form-tip">开启后每天自动分析并生成预警</div>
        </el-form-item>
        <el-form-item label="预警通知">
          <el-checkbox-group v-model="warningSettings.notifyChannels">
            <el-checkbox label="email">邮件</el-checkbox>
            <el-checkbox label="sms">短信</el-checkbox>
            <el-checkbox label="app">APP推送</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="settingsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveWarningSettings">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Setting } from '@element-plus/icons-vue'

const highRiskCount = ref(156)
const mediumRiskCount = ref(234)
const lowRiskCount = ref(567)
const totalWarnings = ref(957)

const activeTab = ref('high')
const selectedMembers = ref([])

const highRiskMembers = ref([
  { memberName: '刘一', phone: '13700137001', level: '金卡会员', daysSinceLastVisit: 45, lastConsumption: 1299, totalConsumption: 25678, churnScore: 85 },
  { memberName: '陈二', phone: '13700137002', level: '银卡会员', daysSinceLastVisit: 38, lastConsumption: 899, totalConsumption: 15234, churnScore: 78 }
])

const mediumRiskMembers = ref([
  { memberName: '周三', phone: '13700137003', daysSinceLastVisit: 22, churnScore: 55 },
  { memberName: '吴四', phone: '13700137004', daysSinceLastVisit: 18, churnScore: 48 }
])

const lowRiskMembers = ref([
  { memberName: '郑五', phone: '13700137005', daysSinceLastVisit: 10 },
  { memberName: '王六', phone: '13700137006', daysSinceLastVisit: 8 }
])

const settingsDialogVisible = ref(false)

const warningSettings = reactive({
  highRiskDays: 30,
  mediumRiskDays: 15,
  lowRiskDays: 7,
  autoWarning: true,
  notifyChannels: ['email', 'app']
})

const getChurnColor = (score) => {
  if (score >= 70) return '#f56c6c'
  if (score >= 40) return '#e6a23c'
  return '#67c23a'
}

const handleRefresh = () => {
  ElMessage.success('流失分析已刷新')
}

const handleSettings = () => {
  settingsDialogVisible.value = true
}

const handleSaveWarningSettings = () => {
  ElMessage.success('设置保存成功')
  settingsDialogVisible.value = false
}

const handleViewMember = () => {
  ElMessage.info('查看会员详情')
}

const handleSendCoupon = () => {
  ElMessage.success('优惠券发放成功')
}

const handleCall = () => {
  ElMessage.info('发起电话回访')
}

const handleAddToCare = () => {
  ElMessage.success('已加入关怀计划')
}

const handleSendMessage = () => {
  ElMessage.success('消息发送成功')
}

const handleBatchSendCoupon = () => {
  ElMessage.success('批量发券成功')
}

const handleBatchSendMessage = () => {
  ElMessage.success('批量发消息成功')
}

const handleBatchAddToCare = () => {
  ElMessage.success('已加入关怀计划')
}
</script>

<style scoped>
.churn-warning-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.warning-stats {
  margin-bottom: 30px;
}

.warning-card {
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  color: white;
  transition: all 0.3s;
}

.warning-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.warning-card.high {
  background: linear-gradient(135deg, #f56c6c 0%, #ff4757 100%);
}

.warning-card.medium {
  background: linear-gradient(135deg, #e6a23c 0%, #ffa502 100%);
}

.warning-card.low {
  background: linear-gradient(135deg, #409eff 0%, #5f27cd 100%);
}

.warning-card.total {
  background: linear-gradient(135deg, #909399 0%, #57606f 100%);
}

.warning-level {
  font-size: 16px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.warning-count {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.warning-desc {
  font-size: 14px;
  opacity: 0.8;
}

.batch-actions {
  margin-top: 20px;
}

.batch-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>

